<!--
 * @Description: JSonView组件
 * @Author: Zhanghan
 * @Date: 2024-12-05 11:24:53
 * @LastEditTime: 2024-12-05 11:40:17
 * @LastEditors: Zhanghan
-->
<template>
  <div :style="{ minWidth: `${minWidth}px` }">
    <JsonViewer
      :value="props.value"
      :expand-depth="props.expandDepth"
      :boxed="props.boxed"
      :sort="props.sort"
      :copyable="copyable"
    />
  </div>
</template>

<script lang="ts" setup>
import { computed } from "vue";
import { JsonViewer } from "vue3-json-viewer";
import "vue3-json-viewer/dist/index.css";

defineOptions({ name: "ProJsonView" });

interface ProJsonViewProps {
  value: Object | Array<any> | string | number | boolean; // JSON对象
  expandDepth?: number; // 展开层级
  boxed?: boolean; // 是否在一个卡片盒子中
  sort?: boolean; // 排序
  copyable?: boolean | object; //复制
  minWidth?: number; // 默认展示宽度
}

const props = withDefaults(defineProps<ProJsonViewProps>(), {
  expandDepth: 0,
  boxed: false,
  sort: false,
  copyable: false,
  minWidth: 80,
});

const copyable = computed(() =>
  props.copyable
    ? {
        copyText: "复制",
        copiedText: "已复制",
        timeout: 2000,
      }
    : false
);
</script>
<style lang="less" scoped>
:deep(.jv-container) {
  background: none;
  width: 100%;
}

:deep(.jv-code) {
  padding: 10px 0;
  text-align: left;
}
</style>
